<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layuiAdmin 主页示例模板二</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../layui/css/admin.css" media="all">
  <style>
    #main{
      position: absolute;
      width: 670px;
      height: 350px;
    }
    #main2{
      position: absolute;
      width: 600px;
      height: 350px;
    }
    #main3{
      position: absolute;
      width: 600px;
      height: 350px;
    }
    #articletag{
      position: absolute;
      width: 650px;
      height: 400px;
    }
    #activitytag{
      position: absolute;
      width: 650px;
      height: 400px;
    }
    .layui-card-data{
      width:50%;
      height: 400px;
      box-sizing: border-box;
      float: left;
      margin-left: 10px;
    }
    .layui-card-audit{
      width: 18%;
      height: 400px;
      box-sizing: border-box;
      float: left;
      margin-left: 15px;
    }
    .layui-card-info{
       width: 27%;
       height: 400px;
      box-sizing: border-box;
      float: left;
      margin-left: 15px;
    }
    .layui-card-other{
      /* width: 700px;
      height: 400px; */
      position: absolute;
      box-sizing: border-box;
      right: 35px;
    }
    .layui-col-md12{
      float: left;
      width: 100%;
      height: 400px;
      margin-top: 20px;
    }
    .layui-card-list{
       width: 50%;
      height: auto;
      box-sizing: border-box;
      float: left;
      margin-left: 10px;
    }
    
    .layui-card-tag{
      width: 47%;
      height: 500px;
      box-sizing: border-box;
      float: left;
      margin-left: 15px;
    }
    

  </style>
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
            <div class="layui-card layui-card-data">
              <div class="layui-card-header">数据概览</div>
              <div class="layui-card-body">  
                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview" id="LAY-index-dataview">
                  <div carousel-item >
                    <div id="main"></div>
                    <div id="main2"></div>
                    <div id="main3"></div>
                  </div>
                </div>
             </div> 
            </div>    
            <div class="layui-card layui-card-audit">
              <div class="layui-card-header">待办事项</div>
              <div class="layui-card-body">

                <div class="layui-carousel layadmin-carousel layadmin-backlog" data-anim="fade" lay-filter="hhgg" id="hhgg">
                  <div carousel-item>
                    <ul class="layui-row layui-col-space10">
                      <li class="layui-col-xs6">
                        <a lay-href="../message/index.html" class="layadmin-backlog-body article_count">
                          <h3>待审文章</h3>
                          <p><cite>66</cite></p>
                        </a>
                      </li>
                      <li class="layui-col-xs6">
                        <a lay-href="../message/index.html" class="layadmin-backlog-body activity_count">
                          <h3>待审活动</h3>
                          <p><cite>12</cite></p>
                        </a>
                      </li>
                      
                    </ul>
                    
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-card layui-card-info">
          <div class="layui-card-header">版本信息</div>
          <div class="layui-card-body layui-text">
            <table class="layui-table">
              <colgroup>
                <col width="100">
                <col>
              </colgroup>
              <tbody>
                <tr>
                  <td>当前版本</td>
                  <td>
                    1.0.0
                  </td>
                </tr>
                <tr>
                  <td>基于框架</td>
                  <td>
                    layui + SpringBoot
                 </td>
                </tr>
                <tr>
                  <td>主要特色</td>
                  <td>零门槛 / 响应式 / 清爽 / 极简</td>
                </tr>
                <tr>
                  <td>系统介绍</td>
                  <td style="padding-bottom: 0;">
                   校园论坛系统是基于layui+SpringBoot的论坛管理系统，可以直观的展示论坛整体的数据信息，帮助管理员更好管理学校活动，提高了论坛信息的管理效率。
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
          </div>

<div class="layui-col-md12">
            <div class="layui-card layui-card-list">
              <div class="layui-tab layui-tab-brief layadmin-latestData">
                <ul class="layui-tab-title">
                  <li class="layui-this">七日热门文章</li>
                  <li>七日热门活动</li>
                </ul>
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show">
                    <table id="LAY-index-topArticle"></table>
                  </div>
                  <div class="layui-tab-item">
                    <table id="LAY-index-topActivity"></table>
                  </div>
                </div>
              </div>
            </div>  
            <div class="layui-card layui-card-tag">
              <div class="layui-card-header">活动与文章标签数据概览</div>
              <div class="layui-card-body">  
                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-tagview" id="LAY-index-tagview">
                  <div carousel-item >
                    <div id="articletag"></div>
                    <div id="activitytag"></div>
                  </div>
                </div>
             </div> 
            </div>   
            
          </div>

        </div>
      </div> 
  

 
  <script src="./JS/utils/request.js"></script>
  <script src="./JS/utils/auth.js"></script>
  <script src="../layui/layui.all.js"></script> 
  <script src="../layui/lay/modules/echarts.js"></script>
  <script src="../layui/lay/modules/carousel.js"></script>
  <script type="text/javascript">
  layui.use(['element','jquery','layer','carousel','table'],function(){
    let $ = layui.jquery;
    var carousel = layui.carousel;
    let table = layui.table;

    $('.article_count cite').text(localStorage.getItem('article_count'))
    $('.activity_count cite').text(localStorage.getItem('activity_count'))

    // 转换函数
function formatChartData(data) {
    return {
        categories: data.map(item => item.date),
        values: data.map(item => item.count)
    };
}

    //数据概况图片轮播
  carousel.render({
    elem: '#LAY-index-dataview'
    ,width: '100%'
    ,height: '400px',
    autoplay:true,
    arrow:'none'
  });
    //各类标签图片轮播
  carousel.render({
    elem: '#LAY-index-tagview'
    ,width: '100%'
    ,height: '400px',
    autoplay:true,
    arrow:'none'
  });
  //图片轮播
  carousel.render({
    elem: '#hhgg'
    ,width: '100%'
    ,height: '400px',
    autoplay:true,
    arrow:'none'
  });
 // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var myChart2 = echarts.init(document.getElementById('main2'))
      var myChart3 = echarts.init(document.getElementById('main3'))
      var myChart4 = echarts.init(document.getElementById('articletag'))
      var myChart5 = echarts.init(document.getElementById('activitytag'))
  // 一周新增用户数据接口请求
  $.ajax({
    url: '/stats/weeklyRegistrations',
    method:'GET',
    headers:{
              'Authorization':localStorage.getItem('token')
    },
    success:function(res){
      console.log(res);
      
      if(res.data === 'NOT_LOGIN'){
        parent.location.href='../login.html'
      }
      const formattedData = formatChartData(res.data)
      console.log(formattedData);
      // 指定图表的配置项和数据
    myChart.setOption({
        title: {
          text: '七日新增用户趋势图',
          left:'center'
        },
        xAxis: {
          // type: 'category',
          data: formattedData.categories
        },
        yAxis: {
          // type: 'value'
        },
        series: [
          {
            data: formattedData.values,
            type: 'line'
          }
        ]
      });
    },
    
    
  });

  // 各学院人数比例数据接口请求
  $.ajax({
    url: '/stats/departmentUsers',
    method:'GET',
    headers:{
              'Authorization':localStorage.getItem('token')
    },
    success:function(res){
      // 指定图表的配置项和数据
    myChart2.setOption({
  title: {
    text: '院系人员分布',
    subtext: 'Department Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '人员数量',
      type: 'pie',
      radius: '50%',
      data: res.data,
      left:'center',
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
    }
  });

  // 论坛性别占比
  $.ajax({
    url: '/stats/genderUsers',
    method:'GET',
    headers:{
              'Authorization':localStorage.getItem('token')
    },
    success:function(res){
      // 指定图表的配置项和数据
    myChart3.setOption({
  title: {
    text: '用户性别分布',
    subtext: 'Sex Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '人员数量',
      type: 'pie',
      radius: '50%',
      data: res.data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
    }
  });
      // 审核点击跳转
  $('.layui-col-xs6').click(function(){
    location.href=$('.layui-col-xs6 a').attr('lay-href')
  })

// 论坛文章标签占比
  $.ajax({
    url: '/stats/articleTags',
    method:'GET',
    headers:{
              'Authorization':localStorage.getItem('token')
    },
    success:function(res){
      // 指定图表的配置项和数据
    myChart4.setOption({
      title: {
    text: '文章热门话题分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '文章数量',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data:res.data
    }
  ]
});
    }
  });

  // 论坛活动标签占比
  $.ajax({
    url: '/stats/activityTags',
    method:'GET',
    headers:{
              'Authorization':localStorage.getItem('token')
    },
    success:function(res){
      // 指定图表的配置项和数据
    myChart5.setOption({
      title: {
    text: '活动热门标签分布',
    left: 'center'
  },
  left:'0px',
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '活动数量',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 30,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: res.data
    }
  ]
});
    }
  });

  // 热门文章和热门活动
 // 初始化文章七日热门榜单（默认显示）
  var articleTable = table.render({
    elem: '#LAY-index-topArticle',
    url: '/stats/topArticleList', // 文章审核数据接口
    cols: [[
      { title: '序号', type: 'numbers', autoSort: true },
      { field: 'title', title: '文章标题'},
      { field: 'username', title: '作者',sort:true },
      {field:'departmentName',title:'院系',sort:true}
    ]],
    headers: {
       'Authorization': localStorage.getItem('token')
  },
    parseData: function (res) { //res 即为原始返回的数据
          // console.log(res)
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.data.totalCount, //解析数据长度
            "data": res.data.list //解析数据列表
          }
        },
    done:function(res){
      //  console.log(res);
    }
  });

  // 初始化活动七日热门榜单
  var activityTable = table.render({
    elem: '#LAY-index-topActivity',
    url: '/stats/topActivityList', // 文章审核数据接口
    cols: [[
      { title: '序号', type: 'numbers', autoSort: true },
      { field: 'title', title: '活动标题'},
      { field: 'username', title: '作者',sort:true },
      {field:'departmentName',title:'院系',sort:true}
    ]],
    headers: {
       'Authorization': localStorage.getItem('token')
  },
    parseData: function (res) { //res 即为原始返回的数据
          // console.log(res)
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.data.totalCount, //解析数据长度
            "data": res.data.list //解析数据列表
          }
        },
    done:function(res){
      //  console.log(res);
    }
  });

  });
  </script>
</body>
</html>